<template>
    <div class="">

        <div class="me-layer">
            <div class="fx-row fx-row-middle">
              <router-link :to="{path : '/me/update'}" class="me-head bg-img-clip" :style="{'backgroundImage':`url(${userBase.userIcon})`}">
                    <span class="me-setting-layer">
                      <i class="tran-center me-setting iconfont icon-openDoor-on"></i>
                    </span>
                </router-link>
            </div>

          <h5 class="me-name">{{userBase.userName}}</h5>

            <div class="fx-row fx-row-center">
                <div class="gird-33">
                  <a href="javascript:void(0)" class="block me-nav">
                      <div class="">
                          <h4 class="me-nav-title">{{userBase.totalCount}}</h4>
                          <span>次</span>
                      </div>

                      <p class="text-color-light me-nav-desc">累计次数</p>
                  </a>
                </div>

                <div class="gird-33">
                  <a href="javascript:void(0)" class="block me-nav">
                      <div class="">
                          <h4 class="me-nav-title">{{userBase.totalTime}}</h4>
                          <span>分钟</span>
                      </div>

                      <p class="text-color-light me-nav-desc">累计时长</p>
                  </a>
                </div>

                <div class="gird-33">
                  <router-link  :to="{'path' : '/me/ranking'}"  class="block me-nav">
                      <div class="">
                          <h4 class="me-nav-title">{{userBase.rank}}</h4>
                          <span>名</span>
                      </div>

                      <p class="text-color-light me-nav-desc">我的排名</p>
                  </router-link>
                </div>
            </div>
        </div>


        <me-menu  :userBase="userBase"/>


    </div>
</template>
<style lang="scss">

  .me-nav{
      color: #4a4a4a;
      font-size: 10px;
      text-align: center;
    .me-nav-title{
      font-weight: bold;
      font-size: 24px;
      display: inline-block;

    }
    .me-nav-desc{
      font-size: 12px;
      margin-top: 10px;
    }
  }

    .me-layer{
      padding: 30px 10px;
      background-color: #ffffff;
    }
    .me-name{
      text-align: center;
      font-size: 16px;
      color: #42BD55;
      margin-top: 12px;
      margin-bottom: 12px;
    }
    .me-setting-layer{
      width: 21px;
      height: 21px;
      background: #42BD55;
      border-radius: 50%;
      display: inline-block;

      position: absolute;
      right: 5px;
      bottom: 1px;

      .me-setting{
        color: #fff;
        font-size: 12px;
      }
    }
   .me-head{
     width: 85.5px;
     height: 85.5px;
     border-radius: 50%;
     border: 1px solid #42BD55;
     position: relative;
   }
</style>
<script>
   import MeMenu from "./MeMenu";
    import Util from "util";
    import API  from "api";


    export default{
        data(){
            return{
                userBase : ""
            }
        },

        mounted : function(){
            this.queryUserDetailInfo();
        },

        methods : {
            queryUserDetailInfo : function(){
              API.biz.queryUserDetailInfo()
                .then(res=>{
                  this.userBase = res.bizData;
                  Util.Storage.setSgObj("userDetail",this.userBase);
                });
            }
        },
        components:{
            MeMenu
        }
    }
</script>
